﻿<style>
    .el-drawer__header {
        display: none
    }
</style>
<template>
    <el-col :sm="24" :md="pzoption.mdwidth">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <i class="iconfont icon-shuaxin pull-right widgetdel hidden-print" title="刷新图表" @click.stop="refchart(pzoption.wigdetcode)"></i>
        <div>
            <ve-funnel :data="childpro.chartData"></ve-funnel>

        </div>
        <!--<el-dialog title="组件属性" :visible.sync="dialogInputVisible" style="opacity:.9">

        </el-dialog>-->
        
    </el-col>
</template>
<script>
    module.exports = {
        props: {
            index: Number,
            pzoption: Object
        },
        data() {
            return {
                dialogInputVisible: false,
                childpro: {
                    placeholder: "统计图表",
                    charttabtype: "0",
                    //chartSettings: {
                    //    type: "pie",
                    //    roseType: '',
                    //    ascending: false,
                    //    label: {
                    //        formatter: '{b}:{c}({d}%)'
                    //    }
                    //},
                    //chartExtend: {
                    //    series: {
                    //        radius: '50%',
                    //        center: ['50%', '50%']
                    //    }
                    //},
                    //legend: {
                    //    bottom: 10,
                    //    left: 'center',
                    //    show: true
                    //},
                    //title: {
                    //    text: "饼图",
                    //    left: 'center',
                    //    top: 10,
                    //    textStyle: {
                    //        fontSize: 16
                    //    }
                    //},
                    //toolbox: {
                    //    feature: {
                    //        //dataZoom: {
                    //        //    yAxisIndex: 'none'
                    //        //},
                    //        //dataView: { readOnly: true },
                    //        //magicType: { type: ['line', 'bar'] },
                    //        //restore: {},
                    //        //saveAsImage: {}
                    //    }
                    //},
                    //chartData: {

                    //},
                    chartData: {
                        columns: ['状态', '数值'],
                        rows: [
                            { '状态': '展示', '数值': 900 },
                            { '状态': '访问', '数值': 600 },
                            { '状态': '点击', '数值': 300 },
                            { '状态': '订单', '数值': 100 }
                        ]
                    }
                }
            };
        },
        methods: {
            delWid: function (wigdetcode) {
                this.$root.nowwidget = { rules: { required: false, message: '请填写信息', trigger: 'blur' } };//没这个删除不掉啊
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });
            },
            senddata: function () {
                this.$emit('data-change', JSON.stringify(this.childpro));
            },
            refchart: function (wigdetcode) {
                this.$refs[wigdetcode + 'vechart'].echarts.resize()
            }

        },
        mounted: function () {
            var chi = this;
            chi.$nextTick(function () {
                if (chi.$root.addchildwig) {
                    chi.$root.addchildwig();//不能缺少
                }
                if (chi.pzoption.childpro.placeholder) {
                    chi.childpro = chi.pzoption.childpro;
                } else {
                    //初始化
                    chi.senddata();
                    //chi.pzoption.staticdata = JSON.stringify([
                    //    { '月份': '一月', '用户量': 1393, '应用数量': 1093, '点击量': 2093 },
                    //    { '月份': '二月', '用户量': 3530, '应用数量': 3230, '点击量': 1230 },
                    //    { '月份': '三月', '用户量': 2923, '应用数量': 2623, '点击量': 1623 },
                    //    { '月份': '四月', '用户量': 1723, '应用数量': 1423, '点击量': 2423 }
                    //])
                    //chi.childpro.chartSettings.type = chi.pzoption.charttype;
                    //chi.$root.UpdateYBData(chi.pzoption);

                }


            })
        },
        watch: {
            'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    //var chi = this;
                    //var data = this.pzoption.dataset;
                    //if (data.length > 0) {
                    //    var keys = [];
                    //    for (var i in data[0]) {
                    //        keys.push(i);
                    //    }
                    //    chi.childpro.chartData = {
                    //        columns: keys,
                    //        rows: data
                    //    }
                    //}


                },
                deep: true
            },
            childpro: { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    this.refchart(this.pzoption.wigdetcode);
                    this.senddata();

                },
                deep: true
            },
            'childpro.chartSettings.type': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV == "ring") {
                        this.childpro.chartExtend.series.radius = ['40%', '50%'];
                    } else {
                        this.childpro.chartExtend.series.radius = '50%';

                    }
                    if (newV == "funnel") {
                        this.childpro.chartSettings.ascending = false;
                    }
                    if (newV == "line" || newV == "histogram" || newV == "bar") {
                        this.childpro.chartExtend.series.markPoint = {
                            data: [
                                { type: 'max', name: '最大值' },
                                //{ type: 'min', name: '最小值' }
                            ]
                        };
                    }

                },
                deep: true
            }
        }

    };
</script>

